<template>
  <div class="page">
    <el-pagination
      @size-change='handleSizeChange'
      @current-change="handleCurrentChange"
      class="pagination"
      :page-size="5"
      :pager-count="11"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'septPages',
  props: ['total'],
  data() {
    return {
      query: {
        total: this.total,
      },
    }
  },
  methods:{
    handleSizeChange(val) {
      // console.log(`每页${val}条`)
      // 向父组件传递sizeChange事件，传入val值
      this.$emit('sizeChange',val)
    },
    handleCurrentChange(val) {
      // console.log(`当前页:${val}`)
      this.$emit('currentChange',val)
    },
  },
}
</script>
